<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.min.css" rel="stylesheet" />
    <style>
      html {
        font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      body {
        overflow-x: hidden;
        background-color: #fff !important;
      }
      
      .mui-content {
        font-size: 13px;
        background-color: #fff;
      }
      
      .flex {
        display: flex;
        margin-top: 5px;
      }
      
      .flex-item {
        flex: 1;
      }
      
      .mui-select {
        width: 80%;
        margin-left: 10%;
        border: 1px solid #C0C0C0;
        border-radius: 6px;
        line-height: 24px;
        font-size: 14px;
        color: #ACACB4;
        text-indent: 6px;
      }
      
      .mui-select:before {
        top: 2px;
        right: 5px;
      }
      
      .add-goods-type {
        margin-top: 8px;
        padding-bottom: 8px;
        position: relative;
        font-size: 13px;
      }
      
      .add-goods-type:after {
        content: '';
        height: 1px;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        transform: scaleY(.5);
        background-color: #acacb4;
      }
      .add-goods-type p{
      	margin-bottom: 2px;
      }
      .apply-id {
        margin-left: 10px;
      }
      .name-box{
      	margin-left: 10px;
      }
      .apply-status{
      	position: absolute;
      	top: 20px;
      	right: 10px;
      }
      /*列表*/
      
      .goods-list {
        list-style: none;
      }
      .title-box {
				background-color: #F8F8F8;
				height: 30px;
				line-height: 30px;
			}
			
			.img-box-title {
				flex: 2;
				text-align: center;
			}
			
			.number-title {
				flex: 4;
				text-align: center;
			}
			
			.op-title {
				flex: 3;
				text-align: center;
			}
      .goods-each {
        padding: 5px 5px;
        position: relative;
      }
       .bgGray{
      	background-color: #F8F8F8;
      }
      .img-box {
        flex: 2;
        position: relative;
      }
      
      .img-box img {
        height: 70px;
        width: 70px;
        vertical-align: middle;
        text-align: center;
      }
      .img-box .id{
      	position: absolute;
      	bottom: 1px;
      	width: 100%;
      	background-color: rgba(52, 52, 52, .5);
      	color: #FFFFFF;
      	text-align: center;
      	font-size: 13px;
      }
      .goods-info-box {
        flex: 4;
        font-size: 14px;
        line-height: 24px;
      }
      
      .goods-info-box div {
        margin-left: 5px;
      }
      
      .goods-op-box {
        flex: 3;
        position: relative;
      }
      .apply-num{
      	position: absolute;
      	bottom: 2px;
      }
      /*申请*/
      
      /**/
      
      .choose-icon {
        position: absolute;
        right: 35px;
      }
      /*滚动区*/
      
      .mui-scroll-wrapper {
        top: 62px;
      }
      /*底部*/
      
      footer {
        height: 38px;
        line-height: 38px;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 15px
      }
      
      footer:before {
        content: '';
        height: 1px;
        position: absolute;
        right: 0;
        bottom: 38px;
        width: 100%;
        transform: scaleY(.5);
        background-color: #acacb4;
      }
      
      .back-btn {
        background-color: #666666;
        color: #fff;
      }
      
      .next-btn {
        background-color: #5677FC;
        color: #fff;
      }
       /**/
     .mui-popover {
				height: 100px;
			}
			.mui-popover .mui-scroll-wrapper{
				top: 0;
				bottom: 0;
				padding: 10px;
			}
    </style>
  </head>

  <body>
    <div class="mui-content">
      <div class="add-goods-type">
        <p class="apply-id">进货单号：</p>
        <p class="name-box">提交：<span class="name"></span></p>
        <span class="apply-status"></span>
      </div>
      <!---->
      <div id="refreshContainer" class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <ul class="goods-list mui-table-view mui-table-view-chevron">
            <script id="goodsLi" type="text/html">
            	<div class="flex title-box">
								<div class="img-box-title">货品</div>
								<div class="number-title">申请</div>
								<div class="op-title">实收</div>
							</div>
               <% for(var i=0;i<list.length;i++ ){ %>
              <%if(i%2===0){%>
							<li class="goods-each mui-clearfix">
								<%}else {%>
								<li class="goods-each bgGray mui-clearfix">
									<%}%>
                <div class="flex">
                  <div class="img-box">
                    <a href="#middlePopover" class="img-info" index="<%=i%>"><img src="<%=imgPath + list[i].cutImg%>" alt="" /></a>
                  	 <div class="id"> <%=list[i].goodsId%></div>
                  </div>
                  <div class="goods-info-box">
                    <div class="goods-name">
                      <%=list[i].goodsName%>
                    </div>
                    <div class="goods-id">申请进货数：
                    	<%=list[i].amount%>
                    </div>
                    <div class="goods-num">配送数：
                      <%=list[i].distributionAmount%>
                    </div>
                  </div>
                  <div class="goods-op-box">
                  	<span class="apply-num">收货数：<%=list[i].receivingAmount%></span>
                  </div>
                </div>
              </li>
              <%}%>
            </script>

          </ul>
        </div>
      </div>
    </div>
    <!--显示附加信息-->
    <div id="middlePopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<p class="fullName">规格：<span></span></p>
					<p class="tags">用途：<span></span></p>
					<p class="score">积分：<span></span></p>
				</div>
			</div>
		</div>
		<!---->
  </body>
  <script src="../config.js"></script>
  <script src="../js/template-native.js" type="text/javascript" charset="utf-8"></script>
  <script src="../js/mui.min.js"></script>
  <script src="../config.js"></script>
  <script>
    (function($, doc) {
        $.init({
          pullRefresh: {
            container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等					
            //					up: {
            //						height:'50px',
            //						auto:true,
            //						contentrefresh: '正在加载...',
            //						contentnomore:'没有更多数据了',
            //						callback: pullupRefresh
            //					}
          }
        })
        $.plusReady(function() {
          receiveParams()
        })
        $.ready(function() {
          bindEvent()
        })
        var applyGoods = {
          apply: {
            applyId: '',
            applyStatus: 2,
            storeId: '',
            storeName: ''
          },
          applyGoodsList: []
        },
        linkMan = ''
				
        function pullupRefresh() {
          setTimeout(function() {
            $('#pullrefresh').pullRefresh().endPulldownToRefresh();
          }, 2000)
        }
        //渲染页面
        function setPage(goodsList) {
          var html = template('goodsLi', {
            list: goodsList,
            imgPath: config.imgPath
          })
          $('.goods-list')[0].innerHTML = html
        }
        //接收传值
        function receiveParams() {
          var self = plus.webview.currentWebview();
          currentShopObj = self.currentShopObj;
          linkMan = self.linkMan
          applyGoods.apply.storeId = self.currentShopObj.storeId
          applyGoods.apply.storeName = self.currentShopObj.storeName
          applyGoods.apply.applyId = self.applyId
          applyGoods.applyGoodsList = self.applyGoodsList
          applyStatusKeyValue = self.applyStatusKeyValue
          setTimeout(function() {
            document.querySelector(".apply-id").innerHTML = '进货单号：' + self.applyId
            document.querySelector(".apply-status").innerText = applyStatusKeyValue
            document.querySelector('.name-box .name').innerHTML = linkMan
            setPage(applyGoods.applyGoodsList)
          }, 0)
        }

        //绑定
        function bindEvent() {
          //滚动
          $('.mui-scroll-wrapper').scroll({
            scrollY: true,
            startX: 0, //初始化时滚动至x
            startY: 0, //初始化时滚动至y
            bounce: true,
            deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
          });
          //显示用途
        $('.goods-list').on('tap','.img-info',function(e){
        	var ind = this.getAttribute('index')
        		var typeFullName = applyGoods.applyGoodsList[ind].type
        		var tags = ''
        		applyGoods.applyGoodsList[ind].tags.forEach(function(item){
        			tags += item.tagDescribe+' '
        		})
        		document.querySelector(".fullName span").innerText = typeFullName
        	  document.querySelector(".tags span").innerText = tags
            document.querySelector(".score span").innerText = applyGoods.applyGoodsList[ind].score
        })
    	}

    }(mui, document))
  </script>
  </body>

</html>